<!-- 游戏编辑弹窗 -->
<template>
  <el-dialog
    title="游戏小号列表"
    :visible="visible"
    width="1000px"
    :destroy-on-close="true"
    :lock-scroll="false"
    @update:visible="updateVisible"
  >

    <ele-pro-table
      ref="table"
      :where="where"
      :datasource="url"
      :columns="columns"
      :selection.sync="selection"
      height="calc(100vh - 485px)">



      <template slot="reason" slot-scope="{row}">
        <div v-if="row.ban_time">

          <div>原因：{{row.ban_rule}}</div>
          <div>解封剩余：{{row.ban_time}}
          </div>
        </div>

      </template>

      <template slot="action" slot-scope="{row}">

          <el-link
            type="danger"
            slot="reference"
            :underline="false"
            @click="openEdit(row)"
            v-if="!row.ban_time"
            >封禁登陆
          </el-link>



          <el-popconfirm v-if="row.ban_time"
                         class="ele-action"
                         title="确定要解除封禁吗？"
                         @confirm="unban(row)">
            <el-link
              type="warning"
              slot="reference"
              :underline="false"
            >解除封禁
            </el-link>
        </el-popconfirm>
      </template>
    </ele-pro-table>

    <RoleEdit v-if="showEdit" :data="current"  :visible.sync="showEdit" @done="reload" />

  </el-dialog>
</template>


<script>
import { mapGetters } from "vuex";
// import GamesList from './comments2'
import RoleEdit from '../../boxuser/user/role-edit.vue';


export default {
  name: 'SubAccount',
  components: {RoleEdit},
  computed: {
    ...mapGetters(["permission"]),
  },

  props: {
    // 弹窗是否打开
    visible: Boolean,
    // 修改回显的数据
    data: Object,
  },
  // components: { uploadImage,PageSelect},

  data() {
    return {
      // 表格数据接口
      url: '/account/index',
      // 表格列配置
      columns: [
        {
          prop: 'id',
          label: 'ID',
          width: 60,
          align: 'center',
          showOverflowTooltip: true,
          fixed: "left"
        },
        {
          prop: 'nickname',
          label: '游戏小号名称',
          showOverflowTooltip: true,
          minWidth: 200,
          align: 'center',
        },


        {
          prop: 'game.game_name',
          label: '游戏名称',
          showOverflowTooltip: true,
          minWidth: 200,
          align: 'center',
        },

        {
          prop: 'member',
          label: '封禁原因',
          showOverflowTooltip: true,
          minWidth: 200,
          align: 'center',
          slot: 'reason'
        },

        {
          prop: 'spend_amount',
          label: '充值金额(单位:元)',
          showOverflowTooltip: true,
          minWidth: 200,
          align: 'center',
        },


        {
          prop: 'login_time',
          label: '最后登陆时间',
          sortable: 'custom',
          align: 'center',
          showOverflowTooltip: true,
          minWidth: 160,
          formatter: (row, column, cellValue) => {
            return this.$util.toDateString(cellValue);
          }
        },


        {
          prop: 'create_time',
          label: '注册时间',
          sortable: 'custom',
          align: 'center',
          showOverflowTooltip: true,
          minWidth: 160,
          formatter: (row, column, cellValue) => {
            return this.$util.toDateString(cellValue);
          }
        },
        {
          columnKey: 'action',
          label: '操作',
          width: 230,
          align: 'center',
          resizable: false,
          slot: 'action',
          fixed: "right"
        }

      ],
      // 表格搜索条件
      where: Object.assign({}, {pid:this.data.id}),
      // 表格选中数据
      selection: [],
      // 当前编辑数据
      current: null,
      // 是否显示编辑弹窗
      showEdit: false,
      showBan:false
    };
  },
  watch: {
    'form.channel_id'(val) {
      if (val === 0) {
        this.$delete(this.form, 'pay_notify_url')
      } else {
        this.$set(this.form, 'pay_notify_url', '')
      }
    },
    visible() {
      this.where={pid:this.data.id}
    }
  },
  methods: {
    unban(row) {
      const loading = this.$loading({lock: true});
      this.$http.post('/banLog/edit', {member_id: row.mid}).then(res => {
        loading.close();
        if (res.data.code === 0) {
          this.$message.success(res.data.msg);
          this.reload();
        } else {
          this.$message.error(res.data.msg);
        }
      }).catch(e => {
        loading.close();
        this.$message.error(e.message);
      });
    },
    openComment(row) {
      this.current = row
      this.showBan = true
    },

    /* 显示编辑 */
    openEdit(row) {
      this.current = row;
      this.showEdit = true;
    },

    /* 刷新表格 */
    reload() {
      this.$refs.table.reload({where: this.where});
    },

    /* 保存编辑 */
    // changeAppid(val) {
    //   this.$set(this.form, 'app_id', val)
    //   console.log(this.form)
    // },
    save() {
      this.$refs['form'].validate((valid) => {
        if (valid) {
          this.loading = true
          this.$http
            .post('/boxGame/edit', this.form)
            .then((res) => {
              this.loading = false
              if (res.data.code === 0) {
                this.$message.success(res.data.msg)
                if (!this.isUpdate) {
                  this.form = {}
                }
                this.updateVisible(false)
                this.$emit('done')
              } else {
                this.$message.error(res.data.msg)
              }
            })
            .catch((e) => {
              this.loading = false
              this.$message.error(e.message)
            })
        } else {
          return false
        }
      })
    },
    /* 更新visible */
    updateVisible(value) {
      this.$emit('update:visible', value)
    }
  }
}
</script>

<style scoped>
</style>
